import React, {Component} from 'react';
import axios from 'axios';

export default class Search extends Component {
	// 搜索方法
	search = () => {
		const {keyWordElement} = this;
		// 获取输入框数据
		console.log(keyWordElement.value);
		// 获取网络数据
		axios.get(`/api1/search/users?q=${keyWordElement.value}`).then(
			response => {
				//请求成功后通知App更新状态
				this.props.searchList({isLoading: false, users: response.data.items});
			},
			error => {
				//请求失败后通知App更新状态
				this.props.searchList({isLoading: false, err: error.message});
			}
		);
	};

	render() {
		return (
			<section className="jumbotron">
				<h3 className="jumbotron-heading">搜索用户名</h3>
				<div>
					<input
						type="text"
						ref={e => {
							this.keyWordElement = e;
						}}
						placeholder="请输入要查询的关键字"
					/>
					&nbsp;<button onClick={this.search}>搜索</button>
				</div>
			</section>
		);
	}
}
